<template>
	<view class="reviews-list">
		<view class="reviews-item" v-for="(item,index) in list" :key="index" @click="toDetail(item)">
			<!-- <view class="avatar-box">
				<image v-if="item.touxiang" :src="item.touxiang" mode=""></image>
				<image v-else :src="avatarDefault" mode=""></image>
			</view> -->
			<view class="reviews-info">
				<view class="user-box flex">
					<view class="avatar-box">
						<image v-if="item.image" :src="item.image" mode="aspectFill"></image>
						<image v-else :src="vuex_avatar_default" mode=""></image>
					</view>
					<view class="user-info flex-between">
						<view class="reviews-nick">
							{{item.nickname}}
						</view>
						<view class="reviews-time">
							{{item.createdTime}}
						</view>
					</view>
				</view>
				<!-- <view class="reviews-star">
					<view class="star-list flex">
						<view class="star-item" v-for="(starItem,starIndex) in item.starItems" :key="starIndex">
							<image v-if="starItem.value == 0" src="@/static/review/star0.png" mode=""></image>
							<image v-if="starItem.value == 1" src="@/static/review/star1.png" mode=""></image>
						</view>
					</view>
				</view> -->
				<view class="reviews-guige">
					规格：{{item.productKeyVals || '默认'}}
				</view>		
				<view class="reviews-text">
					{{item.content}}
				</view>

				<view class="reviews-pic">
					<view class="pic-list">
						<view class="pic-item" v-for="(pic,picindex) in  item.images" :key="picindex"
							@click="doPreview(picindex,pic, item.images)">
							<image :src="pic" mode=""></image>
						</view>
					</view>
				</view>

				<!-- 相关产品 -->
				<!-- showRelativeProduct -->
				<view class="product-box flex" v-if="showRelativeProduct" @click="toProduct(item)">
					<view class="poster-box">
						<image :src="item.productImage" mode="aspectFill"></image>
					</view>
					<view class="product-info">
						<view class="product-title ellipsis-2">
							{{item.productName}}
						</view>
						<view class="product-price">
							<text class="huobi">￥</text>
							<text class="value">{{item.priceSale}}</text>
						</view>
					</view>

				</view>

			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			//评论列表
			list: {
				type: Array,
				default: () => {
					return [];
				}
			},
			//是否展示当前评论的相关产品
			showRelativeProduct: {
				type: Boolean,
				default: false
			},		//是否点击后进入评价详情
			allowClickToDetail: {
				type: Boolean,
				default: false
			},
		},
		data() {
			return {
				starItems: [{
						value: 1
					},
					{
						value: 1
					},
					{
						value: 1
					},
					{
						value: 0
					},
					{
						value: 0
					},
				],
			}
		},
		methods: {
			doPreview(current, image, urls) {
				console.log('图片预览 pic', image)
				// console.log('图片预览 urls', urls)
				uni.previewImage({
					current: current,
					urls: urls,
					indicator: 'default',
					loop: false,
				});
			},

			toProduct(item) {
				this.toRoute({
					path: '/product-detail',
					query: {
						id: item.inventoryId
					}
				})
			},
			toDetail(item) {
				/* if(!this.$props.allowClickToDetail) {
					return 
				} */
				
				this.toRoute({
					path: '/product-review-detail',
					query: {
						item: JSON.stringify(item)
					}
				})
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.reviews-list {
		.reviews-item {
			margin-bottom: 24rpx;
			display: flex;
			align-items: flex-start;
			padding: 32rpx 24rpx;
			// border-bottom: 1rpx solid #EEEEEE;
			background: #FFFFFF;
			// box-shadow: 0rpx 4rpx 16rpx 2rpx rgba(0, 0, 0, 0.06);
			border-radius: 16rpx 16rpx 16rpx 16rpx;


			&:last-child {
				border-bottom: none;
			}


			// .avatar-box {
			// 	width: 80rpx;
			// 	height: 80rpx;
			// 	border-radius: 50%;
			// 	overflow: hidden;

			// 	image {
			// 		width: 80rpx;
			// 		height: 80rpx;
			// 	}
			// }

			.reviews-info {
				flex: 1;
				overflow: hidden;
				// padding-left: 20rpx;


				.user-box {

					.avatar-box {
						width: 60rpx;
						height: 60rpx;
						border-radius: 50%;
						overflow: hidden;

						image {
							width: 60rpx;
							height: 60rpx;
						}
					}

					.user-info {
						flex:1;
						overflow: hidden;
						padding-left: 24rpx;
						
						.reviews-nick {
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						font-size: 28rpx;
						color: #000000;
						}
						
						.reviews-time {
							// margin-top: 10rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #9695A3;
						}
					}
				}


			

				.reviews-star {
					margin-top: 10rpx;


					.star-list {

						.star-item {
							margin-right: 4rpx;
							width: 22rpx;
							height: 22rpx;

							image {
								width: 22rpx;
								height: 22rpx;
							}
						}
					}
				}
				
				.reviews-guige {
					margin-top: 26rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #9695A3;
				}

				.reviews-text {
					text-align: justify;
					margin-top: 20rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #222222;
					line-height: 1.6;
				}

				.reviews-pic {
					margin-top: 20rpx;

					.pic-list {
						display: flex;
						flex-wrap: wrap;

						.pic-item {
							margin-top: 20rpx;
							width: 140rpx;
							height: 140rpx;
							border-radius: 12rpx 12rpx 12rpx 12rpx;
							overflow: hidden;
							margin-right: 20rpx;

							&:nth-child(4n) {
								margin-right: 0;
							}

							&:nth-child(-n + 4) {
								margin-top: 0;
							}

							image {
								width: 140rpx;
								height: 140rpx;
							}
						}
					}
				}

				.product-box {
					margin-top: 30rpx;
					// width: 610rpx;
					min-height: 80rpx;
					background: #F8F8F8;

					border-radius: 0rpx 0rpx 0rpx 0rpx;
					padding: 0;

					.poster-box {
						width: 124rpx;
						height: 124rpx;
						border-radius: 8rpx;
						overflow: hidden;

						image {
							width: 124rpx;
							height: 124rpx;
						}
					}

					.product-info {
						padding: 10rpx;
						padding-left: 24rpx;
						flex: 1;
						overflow: hidden;

						.product-title {
							/* height: 70rpx; */
							font-family: PingFang SC, PingFang SC;
							font-weight: bold;
							font-size: 28rpx;
							color: #000000;
						}

						.product-price {
							margin-top: 14rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: bold;
							font-size: 28rpx;
							color: #000000;

							.huobi {
								font-family: PingFang SC, PingFang SC;
								font-weight: 400;
								font-size: 20rpx;
								color: #E23410;
							}

							.value {
								font-family: PingFang SC, PingFang SC;
								font-weight: bold;
								font-size: 32rpx;
								color: #E23410;
							}
						}
					}


				}
			}
		}
	}
</style>